<!-- 预警信息 -->
<template>
  <div class="module_">
    <div class="mb8">
      <search @clearSearch='clearSearch'>
        <el-form label-width='50px' inline autocomplete="off"  :model="pageparm" class="search_box">
          <el-form-item label="标题">
            <el-input size="medium" clearable v-model="pageparm.title" placeholder="请输入标题搜索"/>
            <input style="display:none" />
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="pageparm.is_read" label="未读消息"  size="small" :true-label='1' :false-label='null' @change='searchChane($event,"is_read")'></el-checkbox>
          </el-form-item> 
        </el-form>
      </search>
    </div>
    <el-table
      :data="tableData"
      height="100%"
      size="medium"
      border
      highlight-current-row
      v-loading="tableLoading"
      @sort-change="tableSortChange"
      @row-click='godetail'
      stripe>
      <el-table-column
        v-for="(v) in headerList"
        :key="v.prop"
        align="center"
        :prop="v.prop"
        :label="v.label"
        :min-width="v.width"
        sortable="custom">
        <template slot-scope="scope">
          <template v-if="v.prop === 'title'">
            <span class="shou">{{scope.row.title}}</span>
          </template>
          <template v-else-if="v.prop === 'employees_id'">
            系统
          </template>
          <template v-else-if="v.prop === 'is_read'">
            {{scope.row.is_read === 2 ? '已读':'未读'}}
          </template>
          <template v-else>
            {{scope.row[v.prop]}}
          </template>
        </template>
      </el-table-column>
    </el-table>

    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>

    <articleDialog ref="articleDialog" :info='info'/>
  </div>
</template>

<script>
import {
  ApiwarningsInfo,
  Apiwarnings
} from "@/api";
import { debounce} from "@/utils";
import {headerList} from '../js/warning'
import articleDialog from "../components/articleDialog.vue"

export default {
  components:{
    articleDialog
  },
  data() {
    return {
      tableData: [],
      editFormVisible: false,
      editForm: {}, //修改
      pageparm: {
        page: 1,
        perPage: 20,
        total: null,
        sort_str: null,
        sort_order: null,
      },
      tableLoading: false,

      headerList,
      info:{
        employee:{}
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    godetail(val){
      const loading = this.$loading({
        lock: true,
        text: "加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      ApiwarningsInfo(val.id).then(({data}) => {
        this.info = data.message
        this.$refs.articleDialog.showArticle = true
        if(val.is_read === 1)this.getList();
      }).finally(() => {
        loading.close();
      });
    },
    handle(index, item, i) {
      this.editForm = { ...item };
      this.editFormVisible = true;
    },
    tableSortChange(column) {
      if (column.order === "descending") {
        this.pageparm.sort_str = column.prop;
        this.pageparm.sort_order = "desc";
      } else if (column.order === "ascending") {
        this.pageparm.sort_str = column.prop;
        this.pageparm.sort_order = "asc";
      } else {
        this.pageparm.sort_str = null;
        this.pageparm.sort_order = null;
      }
      if (column.prop.includes(".")) {
        this.pageparm.sort_str = 'sub_' + column.prop.split(".")[0] + "s_id";
      }
      this.getList();
    },
    //搜索
    searchChane: debounce(function(i,val){
      this.pageparm[val] = i
      this.pageparm.page = 1
      this.getList()
    },500,false),
    clearSearch(){
      this.pageparm.is_read = null
    },
    //分页
    callFather(pageparm) {
      this.pageparm.page = pageparm.page;
      this.pageparm.perPage = pageparm.perPage;
      this.getList();
    },
    getList() {
      this.tableLoading = true;
      Apiwarnings(this.pageparm)
        .then(({ data, page }) => {
          this.tableData = data || [];
          this.pageparm.total = page.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    // deleteUser(index, value) {
    //   this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {
    //       const loading = this.$loading({
    //         lock: true,
    //         text: "删除中...",
    //         spinner: "el-icon-loading",
    //         background: "rgba(0, 0, 0, 0.7)",
    //       });
    //       ApidisinfectcostDel(value.id)
    //         .then((res) => {
    //           this.getList(true);
    //           this.$message({
    //             type: "success",
    //             message: "删除成功!",
    //           });
    //         })
    //         .finally(() => {
    //           loading.close();
    //         });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消删除",
    //       });
    //     });
    // },
    // submit: debounce(
    //   function () {
    //     //提交  修改或新增
    //     const editForm = { ...this.editForm };
    //     for(const key of this.rules){
    //       if(!editForm[key] && editForm[key] !== 0){
    //         this.$message.error("请填写必填信息");
    //         return;
    //       }
    //     }
    //     for (const key in editForm) {
    //       if(!editForm[key] && editForm[key] !== 0){
    //         editForm[key] = 0
    //       }
    //     }
    //     const loading = this.$loading({
    //       lock: true,
    //       text: "加载中...",
    //       spinner: "el-icon-loading",
    //       background: "rgba(0, 0, 0, 0.7)",
    //     });
    //     if (editForm.id) {
    //       //有ID就是修改
    //       ApidisinfectcostPut(editForm, editForm.id)
    //         .then((res) => {
    //           this.$message({
    //             type: "success",
    //             message: "修改成功!",
    //           });
    //           this.editFormVisible = false;
    //           this.getList(true);
    //         })
    //         .catch(() => {
    //           this.$message({
    //             type: "error",
    //             message: "修改失败!",
    //           });
    //         })
    //         .finally(() => {
    //           loading.close();
    //         });
    //     } else {
    //       ApidisinfectcostAdd(editForm)
    //         .then((res) => {
    //           this.$message({
    //             type: "success",
    //             message: "添加成功!",
    //           });
    //           this.editFormVisible = false;
    //           this.getList(true);
    //         })
    //         .catch(() => {
    //           this.$message({
    //             type: "error",
    //             message: "添加失败!",
    //           });
    //         })
    //         .finally(() => {
    //           loading.close();
    //         });
    //     }
    //   },
    //   500,
    //   true
    // ),
  },
};
</script>

<style lang='less' scoped>
</style>